<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="pageCard">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item label="申请日期">
                    <el-date-picker v-model="formInline.date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item label="订单号/账期">
                    <el-input v-model="formInline.user" placeholder="请输入订单号/账单月份" clearable />
                </el-form-item>
                <el-form-item label="发票号码">
                    <el-input v-model="formInline.user" placeholder="请输入发票号码" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="开票记录" name="first">
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column label="申请时间"> </el-table-column>
                        <el-table-column label="公司" prop="createTime"></el-table-column>
                        <el-table-column label="发票类型" prop="nameForShort"></el-table-column>
                        <el-table-column label="开票方式" prop="legalPersonName"></el-table-column>
                        <el-table-column label="发票金额（￥）" prop="legalPersonName"></el-table-column>
                        <el-table-column label="状态" prop="legalPersonName"></el-table-column>
                        <el-table-column label="备注" prop="legalPersonName"></el-table-column>
                        <el-table-column label="操作" width="80">
                            <template #default="scope">
                                <el-button type="primary" size="small" link>详细</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination :totalNum="60"></pagination>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { RefreshRight } from "@element-plus/icons-vue";
const activeName = ref("first");
const formInline: any = reactive({});
</script>
<style scoped lang="scss">
.pageCard {
    position: relative;
    .demo-form-inline {
        position: absolute;
        right: 0;
    }
}
</style>
